{% extends 'base.html' %}
{% block content %}
<link rel="stylesheet" href="/css/user_center.css">
<div class="container" style="margin-top: 10px">
    <div class="row">
        <div class="col-sm-2 col-12" style="padding: 0px 10px">
            <div class="col-12 admin-side" style="height: 320px; border: 1px solid black; font-size: 20px">
                <ul>
                    <li><a href="#" onclick="loadContent('shoucang')">我的收藏</a></li>
                    <li><a href="article_publish" >发布文章</a></li>
                    <li><a href="#" onclick="loadContent('my_drafts')">我的草稿</a></li>
                    <li><a href="#" onclick="loadContent('my_articles')">我的文章</a></li>
                    <li><a href="#" onclick="loadContent('my_comments')">我的评论</a></li>
                    <li><a href="#" onclick="loadContent('personal_info')">个人资料</a></li>
                    <li><a href="#" onclick="loadContent('my_points')">我的积分</a></li>
                </ul>
            </div>
        </div>
        <div class="col-sm-10 col-12" style="padding: 0px 10px; border: 1px solid black;">
            <div class="col-12 admin-main" id="adminMain">
                <!-- 内容将通过 AJAX 加载 -->
            </div>
        </div>
    </div>
</div>

<script>
function loadContent(page) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", page, true);
    xhr.onload = function () {
        if (xhr.status === 200) {
            document.getElementById('adminMain').innerHTML = this.responseText;
        } else {
            console.error("Error loading the page:", xhr.status);
        }
    };
    xhr.send();
}
</script>
{% endblock %}